<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #00FF00;
        }
    </style>
</head>
<body>
<div class="box" id="box">

</div>
<div>
    <button id="btnShow">显示</button>
    <button id="btnHide">隐藏</button>
    <button id="btnToggle">切换</button>
</div>
</body>
<script src="../../lib/jquery.js"></script>
<script>

    /**
     * 1. show hide toggle
     * 2. fadeIn fadeOut fadeToggle
     * 3. slideDown  slideUp  slideToggle
    * **/


    $('#btnShow').bind('click', btnShowClick);
    $('#btnHide').bind('click', btnHideClick);
    $('#btnToggle').bind('click', btnToggleClick);

    function btnShowClick() {
      /* $('#box').show('slow',function () {
           alert('box显示成功')
       }); // slow/fast/normal 3000 ;
        */

      $('#box').fadeIn();

    }

    function btnHideClick() {
      /*  $('#box').hide('slow');*/
        $('#box').fadeOut();
    }

    function btnToggleClick() {
       // $('#box').toggle('slow');
        $('#box').fadeToggle();
    }


</script>
</html>